<template>
  <div class="renzheng">
    <h2>{{ $t('请上传资产证明截图') }}</h2>
    <div class="shangchuan">
      <label class="file-label">
        <input type="file" name="image" data-type="image" @change="uploadImg">
        <span><i class="iconfont icon-762bianjiqi_jietu"></i></span>
        <img v-if="image" :src="downPath + image" alt="" class="img">
      </label>
    </div>
    <h4>{{ $t('截图要求') }}</h4>
    <p>
      {{ $t('本人实名银行卡余额或虚拟币资产截图，或对应银行卡近1个月的银行流水截图。') }}
    </p>
    <h2>{{ $t('请上传手持承诺书照片') }}</h2>
    <div class="shangchuan">
      <label class="file-label">
        <input type="file" name="video" data-type="image" @change="uploadImg">
        <span><i class="iconfont icon-762bianjiqi_jietu"></i></span>
        <img v-if="video" :src="downPath + video" alt="" class="img">
      </label>
    </div>
    <h4>{{ $t('承诺书照片要求') }}</h4>
    <p>1.{{ $t('手持承诺书，进行拍照，保证人脸和承诺书图像清晰可辩。') }}</p>
    <p>
      2.{{ $t('承诺书范本：本人（姓名），身份证号（身份证号码），我的资金来源合法可靠，自愿交易比特币等数字资产，本人充分了解数字货币及潜在风险，本人具有抗风险的能力并自愿承担一切风险。') }}
    </p>
    <a href="javascript:;" class="wancheng" @click="handleAuthMesiness">{{ $t('完成') }}</a>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      image: '',
      video: ''
    }
  },
  computed: {
    ...mapState({
      downPath: ({ imgBaseUrl }) => imgBaseUrl
    })
  },
  methods: {
    ...mapActions({
      getUserInfo: 'auth/getUserInfo',
      uploadCapture: 'auth/uploadCapture',
      uploadVideo: 'auth/uploadVideo',
      authMesiness: 'auth/authMesiness'
    }),
    uploadImg (event) {
      if (this.loading) { return false }
      const attr = event.target.name
      const formData = new FormData()
      formData.append('image', event.target.files[0])
      this.loading = true
      this.uploadCapture(formData)
        .then((data) => {
          this.$toast.success(this.$t('上传成功'))
          this[attr] = data.data.urlPath
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally(() => {
          this.loading = false
        })
    },
    uploadVideos (event) {
      if (this.loading) { return false }
      const attr = event.target.name
      const formData = new FormData()
      formData.append(attr, event.target.files[0])
      this.loading = true
      this.uploadVideo(formData)
        .then((data) => {
          this.$toast.success(this.$t('上传成功'))
          this[attr] = data.data
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleAuthMesiness () {
      if (this.loading) { return false }
      const payload = {
        describe: '123'
      }
      do {
        if (this.image === '') {
          this.errmsg = this.$t('请上传资产证明截图')
          break
        }
        payload.image = this.image
        if (this.video === '') {
          this.errmsg = this.$t('请上传录制视频')
          break
        }
        payload.video = this.video
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      this.loading = true
      this.authMesiness(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.getUserInfo()
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
.file-label {
  display: block;
  width: 100%;
  height: 100%;
}
.file-label input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.file-label .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
</style>
